<template>
    <el-dialog v-model="state.show" title="提示" width="30%">
        <template #default>
            <div v-html="state.content"></div>
        </template>
        <template #footer>
            <el-button @click="state.show = false">取消</el-button>
            <el-button type="primary" @click="state.show = false">确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { reactive } from 'vue';

const state = reactive({
    show: false,
    content: ''
});

const onOpen = data => {
    let errorText = '<div style="padding-bottom: 24px;">以下商品资料未完善，请补充后再上架</div>';
    let listId = '';
    for (let i in data) {
        listId += `<div style="padding-bottom: 12px;">${i}</div>`;
    }
    state.content = errorText + listId;
    state.show = true;
};
defineExpose({
    onOpen
});
</script>
